<script>
import * as service from 'services/x-start/mgr/scene'
export default {
  props: ['visibleDialog', 'ciId'],
  created() {
    console.log(this.visibleDialog)
    this.getList()
  },
  data() {
    return {
      tableData: [],
      checkedId: this.ciId,
    }
  },
  methods: {
    getList() {
      service.getList().then((res) => {
        this.tableData = res.data
      })
    },
    handleClose() {
      this.$emit('update:visibleDialog', false)
    },
    save() {
      if (!this.checkedId) {
        this.$message.warning('请选择场景')
      }
      this.$emit('save', this.checkedId)
    },
    uncheckedAll(e, item) {
      let node = Array.from(
        document.querySelectorAll("input[name='cateList_ids']")
      )
      node.forEach((item) => (item.checked = false))
      e.target.checked = true
      this.checkedId = item.id
    },
    isChecked(id) {
      if (id == this.ciId) {
        return true
      }
      return false
    },
  },
}
</script>
<template lang="pug">
.tree
  el-dialog(
    width='700px',
    title='选择场景',
    :visible.sync='visibleDialog',
    :close-on-click-modal='false',
    :close-on-press-escape='false',
    :before-close='handleClose',
    append-to-body
  )
    el-tree.list(
      :data='tableData',
      ref='tree',
      node-key='id',
      default-expand-all
    )
      span.custom-tree-node(slot-scope='{ node, data }')
        span(v-html='data.name')
        span.options(style='float:right')
          input(
            type='checkbox',
            @click='uncheckedAll($event, data)',
            :value='data.id',
            v-if='data.parentId',
            ref='cateList_ids',
            :checked='isChecked(data.id)',
            name='cateList_ids'
          )
    span.dialog-footer(slot='footer')
      el-button(@click='handleClose', size='mini') 取消
      el-button(type='primary', @click='save()', size='mini') 确定
</template>

<style lang="stylus" scoped>
.icon
  color #ff6d60
  font-size 20px
  margin-left 20px
  line-height 30px
.list
  >>>.el-tree-node__content
    height inherit
.custom-tree-node
  display flex
  justify-content space-between
  width 100%
  input
    max-width 200px
</style>